<template>
	<div class="gallery" @click='handleClick'>
		<div class="img-content">
			<swiper :options="swiperOption">
    			<swiper-slide v-for='(item,index) in imgUrl' :key='index'>
      			<img class='img'  :src='item'/>
    			</swiper-slide>
    			<div class="swiper-pagination"  slot="pagination"></div>
    		</swiper>
	</div>
	</div>
</template>
<script>
	export default{
		name:'CommonGallery',
		props:{
			imgUrl:{
				type:Array,
				default:function(){
					return []
				}
			},

		},
		methods:{
			handleClick:function(){
				this.$emit('close')
			}
		},
		data:function(){
		return {
		swiperOption:{
	      pagination:'.swiper-pagination',
	      paginationType:'fraction',
	      //dom发生变化会自动刷新一次，因为此dom 是从true到false
	      observeParents:true,
	      observer:true
	}}
	}
		}
</script>
<style lang='stylus' scoped>
.gallery >>> .swiper-container
	overflow:inherit
.gallery
	position:absolute
	top:0
	left:0
	right:0
	bottom:0
	z-index:1
	display:flex
	flex-direction:column
	justify-content:center
	background:#000
	.img-content
		width:100%
		height:0
		padding-bottom:100%
		.img
			width:100%
		.swiper-pagination
			color:#fff	
			bottom:-1rem
</style>